<template>
	<view class="zone">
		<Header :title="title" color="#fff"></Header>

		<view class="main">
			<view class="boss">
				<image :src="'http://img.cpgm.cc/panda/static/boss/' + bossdata[id].img" mode="widthFix" />
				<text>{{bossdata[id].name}}</text>
			</view>

			<view class="topbox">
				<view class="box2">
					<view class="explain">每日首次挑战 <text>{{bossdata[id].money}}</text> 银元,每次挑战递增 <text>{{bossdata[id].dz}}</text> 银元</view>
					<view class="line"></view>
					<view class="title">可掉落物品</view>
					<!-- 可获得的装备 -->
					<view class="things">
						<view class="t_item" v-for="(item , index) in bossdata[id].list" :key="index">
							<image :src="'../..' + item.img" mode="widthFix" />
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="challenge()">{{detail.silver}}银元挑战</u-button>
			</view>
		</view>

		<!-- 恭喜获得以下物品 -->
		<u-mask :show ="show">
			<view class="warp">
				<image class="closed2" @click="show = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/mask/sucess.png" mode="widthFix" />
					<image class="guang" src="http://img.cpgm.cc/panda/static/mask/guang.png" mode="widthFix" />
					<h3>恭喜获得以下物品</h3>

					<view class="side">
						<view class="list">
							<view class="item"  v-for="(item , index) in rewarddata" :key="index"> 
								<view class="imgbox">
									<image :src="imgurl+item.img" mode="widthFix" />
								</view>
								<text>{{item.name}}×{{item.num}}</text>
							</view>
						</view>
						<view class="button" @click="show = false">开心收下</view>
					</view>
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	const bossdata = require('@/utils/boss.json');
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				id:'',//人物id
				landid:'',//副本id
				map:'',//地图id
				fight:0,//需要的战力
				bossdata:bossdata.data,
				title:'',
				show:false,
				detail:'',//详情
				rewarddata:'',
				imgurl:config.imgurl,
				userinfo: uni.getStorageSync('userinfo'),
			}
		},
		onLoad(option){
			this.id = option.id
			this.landid = option.land
			this.title = option.name
			this.map = option.map
			this.fight = option.fight
			this.challengeDetail();
		},

		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					this.userinfo = res.data
				})
			},

			// 获取挑战详情
			async challengeDetail(){
				let res = await this.$http.index.challengeDetail({
					type:this.landid,
					map:this.map
				});
				this.detail = res
			},

			// 挑战boss
			async challenge(){
				let res = await this.$http.index.challenge({
					type:this.landid,
					map:this.map
				})
				if(res.code == 1) {
					this.rewarddata = res.data
					this.show = true
					this.challengeDetail();
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>

<style lang="less">
	.zone {
		background: url('http://img.cpgm.cc/panda/static/challange/bg2.png') no-repeat ,#313C5E;
		background-size: 100% auto;
		min-height: 100vh;
		position: relative;
		background-position-y: -40px;
	}

	.main {
		padding: 2vh 10px 10px;
	}

	.topbox {
		padding: 15px;
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		box-shadow: 0px -5px 18px 0px rgba(0,0,0,0.2), inset 0px 2px 0px 0px rgba(255,255,255,1);
		border-radius: 10px;
		margin-top: -40px;
	}

	.box {
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 10px;
	}

	.box2 {
		background: rgba(255,255,255,0.8);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 10px;
		margin-top: 10px;

		.explain {
			color: #000000;
			font-size: 13px;

			text {
				color: #FE5A52;
				font-weight: 600;
			}
		}
	}

	.title {
		text-align: left;
		font-size: 13px;
		color: #000000;
		font-weight: 600;
	}

	// 装备列表
	.things {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 5px;

		.t_item {
			width: 19%;
			margin: 0 0.5%;
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 90%;
				background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
				border-radius: 4px;
			}

			text {
				margin-top: 5px;
				display: block;
				font-size: 12px;
				line-height: 14px;
				text-align: center;
				color: #000;
				line-height: 12px;
				zoom: .9;
			}
		}
	}

	.boss {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;

		image {
			width: 100%;
		}

		text {
			position: absolute;
			bottom: 20%;
			left: calc(50% - 52px);
			width: 104px;
			height: 24px;
			line-height: 24px;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.6) 50%, rgba(0, 0, 0, 0) 100%);
			color: #fff;
			text-align: center;
			font-size: 14px;
		}
	}


	.button {
		width: 100%;
		height: 60px;
		background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
		font-size: 18px;
		font-weight: 600;
		margin-top: 20px;
	}


	.flexbw {
	display: flex;
	margin-top: 5px;
	align-items: center;
	justify-content: space-between;

	text {
		color: #239D4C;
	}

	p {
		display: flex;
		align-items: center;
		color: #000;

		image {
			width: 20px;
		}
	}
}


.line {
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,0.1);
	margin: 10px 0;
}






// 购买弹窗

.warp {
	position: relative;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png'), linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	background-size: 100% auto;
	border-radius: 10px;
	z-index: 9;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		h3 {
			width: fit-content;
			font-size: 18px;
			position: relative;
			z-index: 10;
			line-height: 20px;
			margin-top: 12%;
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.yb {
			width: 45%;
			margin-top: -11%;
		}

		.guang {
			width: 100%;
			position: absolute;
			top: -38%;
			left:0;
			z-index: -1;
		}

		.side {
			background: rgba(255,255,255,0.7);
			border-radius: 9px;
			width: 100%;
			margin-top: 20px;
		}

		.list {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 10px;

			.item {
				width: 21%;
				display: flex;
				flex-direction: column;
				margin: 5px 2% ;
				align-items: center;

				.imgbox {
					width: 90%;
					line-height: 0;
					background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
					border-radius: 4px;

					image {
						width: 100%;
					}
				}
				text {
					font-size: 12px;
					zoom: 0.8;
					margin-top: 4px;
				}
			}
		}
		
	}

	.button {
		margin: 0 auto;
		margin-top: 20px;
		width: 80%;
		height: 55px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		color: #B73800;
		font-size: 16px;
		font-weight: 600;
	}

	.closed2 {
		position: absolute;
		width: 25px;
		top: 5%;
		right: 15px;
	}
}


</style>